import React from 'react'
import PropTypes from 'prop-types'
import { Dropdown, Button, Icon, Menu } from 'antd'

const MenuButton = ({ onMenuClick, menuOptions = [], buttonStyle, dropdownProps }) => {
  const menu = menuOptions.map(item => <Menu.Item key={item.key}> {item.icon && <Icon type={item.icon} />}{item.name}</Menu.Item>)
  return (<Dropdown
    overlay={<Menu onClick={onMenuClick}>{menu}</Menu>}
    {...dropdownProps}
  >
    <Button style={{ border: 'none', ...buttonStyle }}>
      <Icon style={{ marginRight: 2 }} type="bars" />
      <Icon type="down" />
    </Button>
  </Dropdown>)
}

MenuButton.propTypes = {
  onMenuClick: PropTypes.func,
  menuOptions: PropTypes.array.isRequired,
  buttonStyle: PropTypes.object,
  dropdownProps: PropTypes.object,
}

export default MenuButton

// import React from 'react'
// import PropTypes from 'prop-types'
// import {Button, Icon, Menu } from 'antd'

// const MenuButton = ({menuOptions=[], onMenuClick})=>{
//     const menu = menuOptions.map((item) => {
//         return (
//             <a>
//                 <Icon type='save' />
//             </a>
//             // <Menu.Item key={item.key}>
//             //     {item.icon && <Icon type={item.icon} />}
//             //     {item.name}
//             // </Menu.Item>
//         )
//     })

//     return (
//         <span onClick={onMenuClick}>
//             {menu}
//         </span>
//         // <Menu
//         //     onClick={onMenuClick}
//         //     mode="horizontal"
//         // >
//         //     {menu}
//         // </Menu>
//     )
// }

// // MenuButton.propTypes = {
// //   onMenuClick: PropTypes.func,
// //   menuOptions: PropTypes.array.isRequired,
// //   buttonStyle: PropTypes.object,
// //   dropdownProps: PropTypes.object,
// // }

// export default MenuButton